<template>
  <basic-container>
    <div class="search">
      <div class="search-left">
        <el-form
          class="search-container"
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          @keyup.enter="handleQuery"
        >
          <el-form-item label="检验类别" prop="category">
            <el-select v-model="queryParams.category" placeholder="请输入检验类别" clearable>
              <el-option
                v-for="(item, index) in DC_INSPECTION_CLASS"
                :key="index"
                :value="item.label"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="检验物料" prop="materialNumberCollection">
            <dc-select-dialog
              v-model="queryParams.materialNumberCollection"
              placeholder="请选择检验物料"
              objectName="SnCheckMaterial"
              type="input"
              :params="{
                fuseorgid: 100006,
                currentPage: null,
                pageSizeName: null,
              }"
              :multiple="false"
              :multiple-limit="1"
              :clearable="true"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="search-right">
        <el-button type="primary" icon="Search" @click="handleQuery">查找</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <div class="operate-container">
      <el-button type="primary" icon="CirclePlus" @click="handleAddEditeDialog()">新建</el-button>
    </div>

    <div class="table-container">
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="序号" width="60" type="index" align="center">
          <template #default="scoped">
            <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="检验类别"
          width="200"
          prop="category"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          width="200px"
          label="检验物料"
          align="center"
          prop="materialNumberCollection"
          show-overflow-tooltip
        >
          <template #default="scoped">
            <dc-view v-model="scoped.row.materialNumberCollection" objectName="SnCheckMaterial" />
          </template>
        </el-table-column>

        <el-table-column
          label="配置日期"
          min-width="100px"
          align="center"
          prop="configDate"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="参考依据" min-width="100px" align="center" prop="referenceBasisId">
          <template #default="scoped">
            <span class="fileIdflex">
              <dc-upload
                v-model="scoped.row.referenceBasisId"
                :limit="1"
                :isUpload="false"
                :isRemove="false"
                :targetType="Const.targetType.CUSTOMER"
            /></span>
          </template>
        </el-table-column>
        <el-table-column label="是否配置" min-width="90px" align="center" prop="isConfig">
          <template #default="scoped">
            <el-switch
              v-model="scoped.row.isConfig"
              @change="e => handleChange(e, scoped.row)"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scoped">
            <el-button link type="primary" @click="handleAdd(scoped.row)">配置</el-button>
            <el-button link type="primary" @click="handleAddEditeDialog(scoped.row)"
              >编辑</el-button
            >
            <el-button link type="primary" icon="Delete" @click="handleDelete(scoped.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dc-pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getData"
    />

    <AddEditeDialog ref="addEditeDialogRef" @success="resetQuery" />
  </basic-container>
</template>
<script setup name="Productiongroup">
import { onMounted } from 'vue';
import Api from '@/api/index';
import { useRouter } from 'vue-router';
import AddEditeDialog from './addEditeDialog.vue';
import Const from '@/const';

const router = useRouter();
const { proxy } = getCurrentInstance();
// 数据字典
const { DC_INSPECTION_CLASS } = proxy.useCache([{ key: 'DC_INSPECTION_CLASS' }]);
const addEditeDialogRef = ref(null);

const data = reactive({
  queryParams: {
    current: 1,
    size: 10,
  },
  dataList: [],
  companyList: [],
  loading: true,
  total: 0,
});

const { queryParams, dataList, loading, total } = toRefs(data);

onMounted(() => {
  getData();
});

/** 查询参数列表 */
const getData = async () => {
  loading.value = true;
  const params = {
    ...queryParams.value,
    materialNumberCollection: queryParams.value.materialNumberCollection?.id
      ? queryParams.value.materialNumberCollection.id
      : queryParams.value.materialNumberCollection,
  };
  const res = await Api.qms.sn.sipOrderList(params);
  const { code, data } = res.data;
  if (code === 200) {
    dataList.value = data.records.map(record => ({
      ...record,
      isConfig: parseInt(record.isConfig),
    }));
    total.value = data.total;
    queryParams.value.current = data.current;
    queryParams.value.size = data.size;
  }
  loading.value = false;
};

// 添加和编辑
const handleAddEditeDialog = async row => {
  addEditeDialogRef.value.openDialog(row);
};

// 配置
const handleAdd = row => {
  router.push({
    path: '/qms/qualitytestMng/sipCreation/addEditeconfig',
    query: {
      id: row.id,
    },
  });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.current = 1;
  getData();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    current: 1,
    size: 10,
  };
  proxy.resetForm('queryRef');
  getData();
};

// 是否配置
const handleChange = (e, row) => {
  if (e) {
    Api.qms.sn.sipOrderSubmit({
      ...row,
      referenceBasisId: row.referenceBasisId.map(item => item.id).join(','),
      isConfig: 1,
    });
  } else {
    Api.qms.sn.sipOrderSubmit({
      ...row,
      referenceBasisId: row.referenceBasisId.map(item => item.id).join(','),
      isConfig: 0,
    });
  }
};

/** 删除按钮操作 */
const handleDelete = row => {
  const configIds = row.id;
  proxy
    .$confirm('是否确认删除数据项？')
    .then(async () => {
      return Api.qms.sn.sipOrderRemove(configIds);
    })
    .then(() => {
      proxy.$message.success('删除成功');
      getData();
    })
    .catch(() => {});
};
</script>

<style scoped lang="scss">
.pass {
  color: #23c69f;
}
.notpass {
  color: #e12137;
}
.search {
  margin-top: 20px;
}

:deep(.el-card__body) {
  padding-top: 0px;
  .content-warp {
    padding: 0px;
    position: relative;
    .header {
      height: 50px;
      display: flex;
      align-items: center;
    }
  }
}

.fileIdflex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  :deep(.file-list) {
    display: flex;
    justify-content: center;
  }
}
</style>
